<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="order-box">
    <s-header :name="'我的订单'" :back="'/user'"></s-header>
    <van-tabs @change="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab">
      <div></div>
      <van-tab :title="item.name" :name="item.type" v-for="item in status_list" :key="item.type"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <div v-for="item in list_goods" :key="item.id" class="order-item-box"  @click="goTo(item.id)">
          <div class="order-item-header">
            <span>订单时间：{{ item.created_time.substring(0,10)}}  {{ item.created_time.substring(11,19)}} </span>
            <span>{{ item.subject }}</span>
          </div>
          <van-card
            :title="item.commodity_list[0].goods_name"
            :num="item.buy_num"
            :price="item.commodity_list[0].real_price"
            :origin-price="item.commodity_list[0].original_price"
            :desc="item.commodity_list[0].goods_default"
            :thumb="prefix(item.commodity_list[0].goods_img)"
          />

        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'


export default {
  name: 'Order',
  data() {
    return {
      status_list: [
        {type:1,name:'全部'},
        {type:2,name:'未支付'},
        {type:3,name:'已支付'},
        {type:4,name:'待发货'},
        {type:5,name:'待收货'},
        {type:6,name:'已收货'},
      ],
      status: '全部',
      loading: false,
      finished: false,
      refreshing: false,
      list_goods: [],
      page: 1,
      goods_img: '',
      goodsId: '',
      user_id: '',
      username: '',
      real_price: '',
      goods_name: '',
      pay_time: '',
    }
  },
  components: {
    sHeader
  },
  created() {

  },
  async mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      let user_id = this.$cookies.get('id')
      let status = this.status-2
      if ( status >= 0){
        this.$axios.get(`${this.$settings.BASE_URL}orderform/order/?user_id=${user_id}&order_status=${status}`,
        {headers:{'Authorization':'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.list_goods = res.result
        console.log(res.result)
        this.totalPage = 1
        this.loading = false;
        this.finished = true
      })
      }else{
        this.$axios.get(`${this.$settings.BASE_URL}orderform/order/?user_id=${user_id}`,
        {headers:{'Authorization':'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.list_goods = res.result
        this.totalPage = 1
        this.loading = false;
        this.finished = true
      })
      }

    },
    onChangeTab(name, title) {
      this.status = name
      this.onRefresh()
    },
    goTo(order_form) {
      this.$router.push({path: `/orderdetail/${order_form}`})
    },
    goBack() {
      this.$router.go(-1)
    },
    onLoad() {
      if (!this.refreshing && this.page < this.totalPage) {
        this.page = this.page + 1
      }
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.loadData()
    },
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.page = 1
      this.onLoad()
    },
  }
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';

.order-box {
  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
  }

  .my-order {
    font-size: 44px;
    color: #252525;
    padding: 400px;
  }

  .order-tab {
    margin-top: 44px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
  }

  .order-list-refresh {
    margin-top: 68px;

    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .van-pull-refresh__head {
      background: #f9f9f9;
    }

    .van-list {
      min-height: calc(100vh - 88px);
      background: #f9f9f9;
      margin-top: 20px;
    }

    .order-item-box {
      margin: 20px 10px;
      background-color: #fff;

      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }

      .van-card {
        background-color: #fff;
        margin-top: 0;
      }
    }
  }
}
</style>
